<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button type="primary" @click="myBorrow">我的借款记录</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="tel" header-align="center" align="center" label="用户电话">
      </el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="姓名">
      </el-table-column>
      <el-table-column prop="pwd" header-align="center" align="center" label="密码">
      </el-table-column>
      <el-table-column prop="money" header-align="center" align="center" label="余额">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="jie(scope.row)">借款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      {{borrow}}<br>
      name:<el-input v-model="user.name" disabled placeholder="请输入内容"></el-input><br>
      money:<el-input v-model="user.money" disabled placeholder="请输入内容"></el-input><br>
      createDate:<el-input v-model="createDate" disabled placeholder="请输入内容"></el-input><br>
      money:<el-input v-model="borrow.money" placeholder="请输入内容" @blur="checkmoney"></el-input><br>
      types: <el-select v-model="borrow.type" placeholder="请选择">
        <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select><br>
      每期还款金额<el-input v-model="borrow.aaa" placeholder="请输入内容"></el-input><br>
      综合利率计算<el-input v-model="borrow.bbb" placeholder="请输入内容"></el-input><br>
      综合手续费计算<el-input v-model="borrow.ccc" placeholder="请输入内容"></el-input><br>
      总共还款金额<el-input v-model="borrow.ddd" placeholder="请输入内容"></el-input><br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addborrow">确 定</el-button>
      </span>
    </el-dialog>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {

          types: [{ id: 1, name: '1个期' }, { id: 3, name: '3个期' }, { id: 6, name: '6个期' }, { id: 12, name: '12个期' }],
          rate: [],
          createDate: new Date(),
          borrow: {
            bid: '',
            uid: '',
            //state: '',
            money: '',
            type: '',
            aaa: '',
            bbb: '',
            ccc: '',
            ddd: '',
            refunded: 0,
            rate: '',
            buid: ''
          },
          user: {},
          baseUrl: 'http://localhost:8888/api',
          token: null,
          dataForm: {
            key: ''
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false,
          dialogVisible: false
        }
      },
      watch: {
        'borrow.money'(val) {
          if (val < this.rate[0].price) {
            this.borrow.rate = this.rate[0].rates
          } else if (val < this.rate[1].price) {
            this.borrow.rate = this.rate[1].rates
          } else if (val < this.rate[2].price) {
            this.borrow.rate = this.rate[2].rates
          } else if (val < this.rate[3].price) {
            this.borrow.rate = this.rate[3].rates
          } else {
            this.borrow.rate = this.rate[4].rates
          }
          console.log('利率结果', this.borrow.rate);
        },
        'borrow.type'(val) {
          console.log(val, this.borrow.money, this.borrow.rate);
          this.borrow.aaa = ((val + 1) * this.borrow.money * this.borrow.rate / 2 + (this.borrow.money - 0)) / val
          this.borrow.bbb = this.borrow.rate
          this.borrow.ccc = (val + 1) * this.borrow.money * this.borrow.rate / 2
          this.borrow.ddd = (val + 1) * this.borrow.money * this.borrow.rate / 2 + (this.borrow.money - 0)
        }
      },
      created() {
        this.token = localStorage.getItem("token")
        if (this.token == null) {
          alert("无权访问")
          location = './t3_login.html'
        }
        this.getDataList();
      },
      //方法集合
      methods: {
        myBorrow() {
          location = './t3_borrow.html'
        },
        addborrow() {
          axios.post(`${this.baseUrl}/borrow/borrow/save`, this.borrow, { headers: { token: this.token } }).then(({ data }) => {
            if (data.code == 0) {
              alert('借款成功')
              this.dialogVisible = false
              this.getDataList();
            }
          })
        },
        checkmoney() {
          if (this.user.money < this.borrow.money) {
            alert("借款金额不可大于当前用户可借金额")
          }
        },
        jie(data) {
          this.user = data
          this.borrow.buid = data.tel
          this.dialogVisible = true
        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          axios({
            url: `${this.baseUrl}/borrow/user/list`,
            method: 'get',
            params: {
              'page': this.pageIndex,
              'limit': this.pageSize,
              'key': this.dataForm.key
            },
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataList = data.page.list
              this.rate = data.rate
              console.log(this.rate[0]);
              this.totalPage = data.page.totalCount
            } else {
              this.dataList = []
              this.totalPage = 0
            }
            this.dataListLoading = false
          })
        },
        // 每页数
        sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
        },
        // 多选
        selectionChangeHandle(val) {
          this.dataListSelections = val
        },
      },
    })
  </script>
</body>

</html>